<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	template="/WEB-INF/template/ui.xhtml">

	<ui:define name="content">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<h3>#{m['core.register']}</h3>
				<div class="row plain-form-wrapper">
					<div class="col-md-8">
						<h:form id="signUpForm" class="plain-form">
							<div class="form-group row">
								<label for="name" class="col-md-5 required control-label">#{m['core.username']}</label>
								<div class="col-md-7">
									<h:inputText id="name" value="#{accountCtrl.name}" class="form-control" required="true"
										requiredMessage="#{m['error.username.required']}"
										validatorMessage="#{m['error.username.invalid']}" binding="#{accountCtrl.nameUIInput}"
										title="#{m['core.username.hint']}">
										<f:validateRegex pattern="#{accountCtrl.namePattern}" />
									</h:inputText>
									<h:message for="name" errorClass="message-error" />
								</div>
							</div>
							<div class="form-group row">
								<label for="email" class="col-md-5 required control-label">#{m['core.email']}</label>
								<div class="col-md-7">
									<h:inputText id="email" value="#{accountCtrl.email}" class="form-control" required="true"
										requiredMessage="#{m['error.email.required']}"
										validatorMessage="#{m['error.email.invalid']}" binding="#{accountCtrl.emailUIInput}"
										title="#{m['core.email.hint']}">
										<f:validateRegex pattern="#{accountCtrl.emailPattern}" />
									</h:inputText>
									<h:message for="email" errorClass="message-error" />
								</div>
							</div>
							<div class="form-group row">
								<label for="emailConfirm" class="col-md-5 required control-label">#{m['core.emailRepeat']}</label>
								<div class="col-md-7">
									<h:inputText id="emailConfirm" value="#{accountCtrl.emailConfirm}" class="form-control"
										required="true" requiredMessage="#{m['error.email.required']}"
										validatorMessage="#{m['error.email.invalid']}"
										binding="#{accountCtrl.emailConfirmUIInput}" title="#{m['core.email.hint']}">
										<f:validateRegex pattern="#{accountCtrl.emailPattern}" />
									</h:inputText>
									<h:message for="emailConfirm" errorClass="message-error" />
								</div>
							</div>
							<div class="form-group row">
								<label for="password" class="col-md-5 required control-label">#{m['core.password']}</label>
								<div class="col-md-7">
									<h:inputSecret id="password" value="#{accountCtrl.password}" class="form-control"
										required="true" requiredMessage="#{m['error.password.required']}"
										validatorMessage="#{m['error.password.invalid']}" binding="#{accountCtrl.passwordUIInput}"
										title="#{m['core.password.hint']}">
										<f:validateRegex pattern="#{accountCtrl.passwordPattern}" />
									</h:inputSecret>
									<h:message for="password" errorClass="message-error" />
								</div>
							</div>
							<div class="form-group row">
								<label for="passwordConfirm" class="col-md-5 required control-label">#{m['core.passwordRepeat']}</label>
								<div class="col-md-7">
									<h:inputSecret id="passwordConfirm" value="#{accountCtrl.passwordConfirm}"
										class="form-control" required="true" requiredMessage="#{m['error.password.required']}"
										validatorMessage="#{m['error.password.invalid']}"
										binding="#{accountCtrl.passwordConfirmUIInput}" title="#{m['core.password.hint']}">
										<f:validateRegex pattern="#{accountCtrl.passwordPattern}" />
									</h:inputSecret>
									<h:message for="passwordConfirm" errorClass="message-error" />
								</div>
							</div>
							<div class="form-group row">
								<div class="col-md-7 col-md-offset-5">
									<h:commandButton class="btn btn-primary form-control" action="#{accountCtrl.signUpUser}"
										value="#{m['core.register']}" />
								</div>
							</div>
						</h:form>
					</div>
				</div>
			</div>
		</div>
		<h:outputScript>
		$(document).ready(function() {
			$('#signUpForm\\:name').focus();
			$('input:not(:hidden):not(:submit)[title]').tooltip({placement: 'right', container: 'body'});
		});
		</h:outputScript>
	</ui:define>

</ui:composition>